<template>
	<view>
		<nav-bar title="绑定银行卡账号"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="input_form_box">
			<picker @change="bankCardChange" :range="bankCardList" range-key="name">
				<view class="input_box">
					<view class="name required">开户银行</view>
					<view class="select_info">
						<view class="value" v-if="bankCardData.objId">{{bankCardData.name}}</view>
						<view class="select" v-else>请选择</view>
					</view>
				</view>
			</picker>
			<view class="input_box">
				<view class="name required">银行卡账号</view>
				<view class="input_info"><input type="number" v-model="bankCardNum" placeholder="请输入" /></view>
			</view>
			<view class="input_box line">
				<view class="name required">持卡人姓名</view>
				<view class="input_info"><input type="text" v-model="bankCardName" placeholder="请输入" /></view>
			</view>
			<view class="input_box line required">
				<view class="input_info">
					<input type="text" class="input_font_left" v-model="code" @confirm="onSubmit" placeholder="*请输入手机验证码" />
					<button @click="onSetCode">{{ codeText }}</button>
				</view>
			</view>
			<view class="form_but"><button class="active" @click="onSubmit">确认</button></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
let clear;
export default {
	data() {
		return {
			bankCardNum: '',
			bankCardName: '',
			code: '',
			//验证码
			codeText: '获取验证码',
			//验证码已发
			readonly: false,
			bankCardList:[],
			bankCardData:{}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		this.pageData();
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		pageData(){
			this.$http
				.get('api/open/v1/bank')
				.then(res => {
					this.bankCardList = res;
				});
		},
		bankCardChange(e){
			this.bankCardData = this.bankCardList[e.detail.value];
		},
		//验证码按钮文字状态
		getCodeState() {
			clear && clearInterval(clear);
			const _this = this;
			this.readonly = true;
			this.codeText = '60S后重新获取';
			var s = 60;
			clear = setInterval(() => {
				s--;
				_this.codeText = s + 'S后重新获取';
				if (s <= 0) {
					clearInterval(clear);
					_this.codeText = '获取验证码';
					_this.readonly = false;
				}
			}, 1000);
		},
		// 发送验证码
		onSetCode() {
			this.$http
				.post('api/open/v1/send_sms', {
					phone: this.userInfo.phone,
					type: 3109
				})
				.then(res => {
					this.getCodeState();
				});
		},
		onSubmit(){
			if (!this.bankCardData.objId) {
				uni.showToast({
					title: '请选择开户银行',
					icon: 'none'
				});
				return;
			}
			if (!this.bankCardNum) {
				uni.showToast({
					title: '请输入银行卡账号',
					icon: 'none'
				});
				return;
			}
			if (!this.bankCardName) {
				uni.showToast({
					title: '请输入持卡人姓名',
					icon: 'none'
				});
				return;
			}
			if (!this.code) {
				uni.showToast({
					title: '请输入手机号验证码',
					icon: 'none'
				});
				return;
			}
			this.$http
				.post('api/mime/wallet/v1/bind', {
					bankId:this.bankCardData.objId,
					branchBankName:this.bankCardData.name,
					bankCardNum:this.bankCardNum,
					bankCardName:this.bankCardName,
					code:this.code,
					type:1103,
				})
				.then(res => {
					uni.showToast({
						title:"绑定成功",
						duration:2000,
						success: () => {
							setTimeout(()=> {
								uni.navigateBack();
							},2000)
						}
					})
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
page {
	background-color: #f5f5f5;
}
.input_form_box .input_box input.input_font_left {
	text-align: left;
}
</style>
